<!doctype html>
<title>JavaScript Example</title>
<link rel="stylesheet" href="https://unpkg.com/normalize.css@8.0.1/normalize.css">
<link rel="stylesheet" href="https://unpkg.com/sakura.css@1.3.1/css/sakura.css">
<link  type="images/x-icon"  href="./static/favicon.ico"  rel="shortcut icon">
<style>
  ul { margin: 0; padding: 0; display: flex; list-style-type: none; }
  li > * { padding: 1em; }
  li.active > a { color: #5e5e5e; border-bottom: 2px solid #4a4a4a; }
  form { display: flex; }
  label > input { width: 3em; }
  form > * { padding-right: 1em; }
  #result { font-weight: bold; }
</style>
<ul>
    <li>
        <span>Type:</span>
    </li>
    <li class="{% if page == 'fetch' %}active{% endif %}">
        <a href="{{ url_for('index.index', page='fetch') }}">Fetch</a>
    </li>
    <li class="{% if page == 'xhr' %}active{% endif %}">
        <a href="{{ url_for('index.index', page='xhr') }}">XHR</a>
    </li>
    <li class="{% if page == 'jquery' %}active{% endif %}">
        <a href="{{ url_for('index.index', page='jquery') }}">jQuery</a>
    </li>
    <li class="{% if page == 'upload' %}active{% endif %}">
        <a href="{{ url_for('upload.upload_file') }}">Upload-Form</a>
    </li>
    <li class="{% if page == 'upload_api' %}active{% endif %}">
        <a href="{{ url_for('upload.upload_file_api') }}">Upload-Xhr</a>
    </li>
</ul>
<hr>
<div id="app">
    <p>
        {% block intro %}{% endblock %}
    </p>
    <hr>
    {% block form %}
    <form id="calc">
        <label>a:
            <input name="a" id="a" />
        </label>
        <span>+</span>
        <label>b:
            <input name="b" id="b" />
        </label>
        <input type="submit" value="计算">
    </form>
    <span>=
        <span id="result"></span>
    </span>
    {% endblock %}
</div>
{% block script %}{% endblock %}

